<template>
	<view class="myinformation-container">
		<!-- 页面标题栏 -->
		<view class="header">
			<view class="back-button" @tap="goBack">
				<image src="/static/images/return.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<text class="header-title">个人信息</text>
		</view>
		
		<!-- 流光卡片 -->
		<view class="glow-card">
			<view class="glow-border"></view>
			<view class="card-content">
				<!-- 头像区域 -->
				<view class="avatar-container">
					<image :src="this.bindingStore.userInfo.avatarUrl || '/static/images/noAvatar.jpg'" class="avatar" mode="aspectFill"></image>
				</view>
				
				<!-- 用户基本信息 -->
				<view class="user-basic-info">
					<view class="user-box">
						<image v-show="this.bindingStore.userInfo.gender=1" class="user-gender-icon" src="/static/images/male-icon.png" mode="aspectFit"></image>
						<image v-show="this.bindingStore.userInfo.gender=0" class="user-gender-icon" src="/static/images/female-icon.png" mode="aspectFit"></image>
						<text class="username">{{this.bindingStore.userInfo.name || '未设置昵称'}}</text>
					</view>
					<text class="user-id">ID: {{this.bindingStore.userInfo.id || '未知'}}</text>
				</view>
				
				<!-- 信息列表 -->
				<view class="info-list">
					<view class="info-item" @tap="bindName">
						<view class="info-label">
							<text>用户名</text>
						</view>
						<view class="info-value">
							<text>{{this.bindingStore.userInfo.name || '未设置'}}</text>
						</view>
					</view>
					
					<view class="info-item" @tap="bindPhone">
						<view class="info-label">
							<text>手机号</text>
						</view>
						<view class="info-value">
							<text>{{formatPhone(this.bindingStore.userInfo.mobile)}}</text>
						</view>
					</view>
					
					<!-- <view class="info-item" @tap="bindWeixin">
						<view class="info-label">
							<text>绑定微信</text>
						</view>
						<view class="info-value">
							<text>{{this.bindingStore.userInfo.wechatId ? this.bindingStore.userInfo.wechatId : '未绑定'}}</text>
						</view>
					</view> -->
					
					<!-- <view class="info-item" @tap="bindEmail">
						<view class="info-label">
							<text>邮箱</text>
						</view>
						<view class="info-value">
							<text>{{this.bindingStore.userInfo.email ? this.bindingStore.userInfo.email : '未绑定'}}</text>
						</view>
					</view> -->
					<view class="info-item" @tap="bindBirthday">
						<view class="info-label">
							<text>生日</text>
						</view>
						<view class="info-value">
							<text>{{this.bindingStore.userInfo.birthday ? this.bindingStore.userInfo.birthday : '未填写'}}</text>
						</view>
					</view>
					
					<!-- <view class="info-item">
						<view class="info-label">
							<text>注册时间</text>
						</view>
						<view class="info-value">
							<text>{{formatDate(userInfo.createTime)}}</text>
						</view>
					</view> -->
				</view>
				
				<!-- 操作按钮 -->
				<!-- <view class="action-buttons">
					<view class="action-button reset-password" @tap="resetPassword">
						<text class="iconfont icon-password"></text>
						<text>重置密码</text>
					</view>
					
					<view class="action-button logout" @tap="showLogoutConfirm">
						<text class="iconfont icon-logout"></text>
						<text>注销账号</text>
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-container">
			<button class="logout-button" @tap="destroy">注销账号</button>
		</view>
		
		<!-- 确认弹窗 -->
		<view class="confirm-dialog" v-if="showConfirm">
			<view class="confirm-mask" @tap="cancelConfirm"></view>
			<view class="confirm-content">
				<view class="confirm-title">{{confirmTitle}}</view>
				<view class="confirm-message">{{confirmMessage}}</view>
				<view class="confirm-buttons">
					<button class="cancel-btn" @tap="cancelConfirm">取消</button>
					<button class="confirm-btn" @tap="confirmAction">确认</button>
				</view>
			</view>
		</view>
		<!-- 绑定组件 -->
		<BindingVue v-if="bindingStore.binding"/>
	</view>
</template>

<script>
	import bindingStore from '../../store/binding.js';
	import BindingVue from "../../components/binding/binding.vue"; 
	import {getUserInfo as getStoreUserInfo} from '../../store/userInfo.js';
	import globalStore from '../../store/global.js';
	import {getUserInfo,UserDestroy,UserModify} from '../../api/userApi.js';
	
	export default {
		data() {
			return {
				// userInfo: {
				// 	"name":"摸摸鱼",
				// 	"id":12,
				// 	"mobile":"12345678901",
				// 	"realname":"真实姓名",
				// 	"avatarUrl":"头像",
				// 	"birthday":"生日",
				// 	"gender":"性别",
				// 	"email":"邮箱",
				// 	"wechatId":"微信号"
				// 	},
				showConfirm: false,
				confirmTitle: '',
				confirmMessage: '',
				confirmCallback: null,
				bindingStore: bindingStore
			}
		},
		onLoad() {
			// 获取用户信息
			this.fetchUserInfo();
			console.log('binding状态:', bindingStore.binding);
		},
		methods: {
			// 从API获取用户信息
			async fetchUserInfo() {
				try {
					const result = await getUserInfo();
					
					// // 显示获取到的信息
					// uni.showModal({
					// 	title: '用户信息',
					// 	content: JSON.stringify(result || {}),
					// 	showCancel: false
					// });
					
					// 如果获取成功，更新用户信息
					if (result.code === 0 && result.data) {
						this.bindingStore.userInfo = result.data;
					}
					console.log(this.bindingStore.userInfo);
				} catch (error) {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none',
						duration: 2000
					});
					console.error('获取用户信息失败:', error);
				}
			},
			
			// 加载用户信息(从store)
			async loadUserInfo() {
				const userData = await getStoreUserInfo();
				if (userData) {
					this.bindingStore.userInfo = userData;
				} else {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
				}
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 格式化手机号 (123****7890)
			formatPhone(phone) {
				if (!phone) return '未绑定';
				return phone.substring(0, 3) + '****' + phone.substring(7);
			},
			
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '未知';
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
			},
			
			
			// 修改用户名
			bindName() {
				bindingStore.showBinding('username');
			},
			// 修改手机号
			bindPhone() {
				bindingStore.showBinding('phone');
			},
			
			// 绑定微信
			// bindWeixin() {
			// 	bindingStore.showBinding('weixin');
			// },
			
			// // 绑定邮箱
			// bindEmail(){
			// 	bindingStore.showBinding('email');
			// },
			
			// 绑定生日
			bindBirthday(){
				bindingStore.showBinding('birthday');
			},
			
			// 重置密码
			resetPassword() {
				uni.navigateTo({
					url: '/pages/resetPassword/resetPassword'
				});
			},
			
			// 显示注销确认
			showLogoutConfirm() {
				this.showConfirm = true;
				this.confirmTitle = '注销账号';
				this.confirmMessage = '注销账号后，所有数据将被清除且无法恢复，确认继续吗？';
				this.confirmCallback = this.doDestroy;
			},
			
			// 注销
			destroy() {
				// 显示确认弹窗
				this.showConfirm = true;
				this.confirmTitle = '注销账号';
				this.confirmMessage = '注销账号后，所有数据将被清除且无法恢复，确认继续吗？';
				this.confirmCallback = this.doDestroy;
			},
			
			// 执行注销账号
			async doDestroy() {
				try {
					uni.showLoading({
						title: '处理中'
					});
					
					// 用户ID作为参数传递给后端
					const idList = [this.bindingStore.userInfo.id];
					const result = await UserDestroy(idList);
					
					uni.hideLoading();
					
					// 如果注销成功
					if (result.code === 0) {
						uni.showToast({
							title: '账号已注销',
							icon: 'success',
							duration: 2000
						});
						
						// 清除token和登录状态
						globalStore.clearTokenAndLoginType();
						
						// 返回到登录页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 2000);
					} else {
						uni.showToast({
							title: result.msg || '注销失败',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '注销失败',
						icon: 'none',
						duration: 2000
					});
					console.error('注销账号失败:', error);
				}
			},
			
			// 取消确认
			cancelConfirm() {
				this.showConfirm = false;
				this.confirmCallback = null;
			},
			
			// 确认操作
			confirmAction() {
				this.showConfirm = false;
				if (typeof this.confirmCallback === 'function') {
					this.confirmCallback();
				}
			}
		},
		components:{
			BindingVue
		}
	}
</script>

<style>
	.myinformation-container {
		min-height: calc(100vh - 30px);
		/* background: linear-gradient(to bottom, #ffffff, #ffffff); */
		background-color: #ffffff;
		padding: 30rpx;
		position: relative;
		overflow: hidden;
	}
	
	/* 头部样式 */
	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		position: relative;
		margin-bottom: 50rpx;
	}
	
	.back-button {
		position: absolute;
		left: 0;
		z-index: 10;
		padding: 15rpx;
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}
	
	/* 流光卡片样式 */
	.glow-card {
		position: relative;
		background: rgba(222, 222, 222, 0.8);
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
	}
	
	.glow-border {
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: conic-gradient(
			transparent, 
			rgba(255, 106, 0, 0.8), 
			rgba(255, 106, 0, 0.6),
			rgba(255, 106, 0, 0.4),
			transparent 40%
		);
		animation: rotate 4s linear infinite;
		z-index: 0;
	}
	
	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}
	
	.card-content {
		position: relative;
		background: #fcfcfc;
		margin: 2rpx;
		border-radius: 22rpx;
		padding: 40rpx 30rpx;
		z-index: 1;
	}
	
	/* 头像区域 */
	.avatar-container {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
	}
	
	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 106, 0, 0.6);
		box-shadow: 0 0 20rpx rgba(255, 106, 0, 0.4);
	}
	
	/* 用户基本信息 */
	.user-basic-info {
		text-align: center;
		margin-bottom: 50rpx;
	}
	.user-box{
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: antiquewhite; */
	}
	.user-gender-icon {
		width: 60rpx;
		height: 60rpx;
	}
	.username {
		font-size: 40rpx;
		font-weight: bold;
		color: #000000;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.user-id {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}
	
	/* 信息列表 */
	.info-list {
		margin-bottom: 40rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	
	.info-label {
		display: flex;
		align-items: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 28rpx;
	}
	
	.info-label text:first-child {
		margin-right: 15rpx;
		color: rgba(0, 0, 0, 0.9);
	}
	
	.info-value {
		display: flex;
		align-items: center;
		color: rgba(0, 0, 0, 0.6);
		font-size: 28rpx;
	}
	
	.info-value .icon-right {
		margin-left: 10rpx;
		font-size: 24rpx;
	}
	
	/* 操作按钮 */
	.action-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}
	
	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 16rpx;
		background: rgba(50, 50, 55, 0.8);
		width: 45%;
	}
	
	.action-button text:first-child {
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}
	
	.reset-password {
		color: #FF6A00;
	}
	
	.logout {
		color: #ff5252;
	}
	
	/* 退出登录按钮 */
	.logout-container {
		margin-top: 60rpx;
		padding: 0 40rpx;
	}
	
	.logout-button {
		background: linear-gradient(to right, #FF6A00, #FF4500);
		color: white;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 16rpx rgba(255, 106, 0, 0.3);
	}
	
	/* 确认弹窗 */
	.confirm-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
	
	.confirm-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
	}
	
	.confirm-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		background: #252525;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
		border: 1rpx solid rgba(255, 106, 0, 0.4);
	}
	
	.confirm-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.confirm-message {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
		margin-bottom: 40rpx;
		line-height: 1.6;
	}
	
	.confirm-buttons {
		display: flex;
		justify-content: space-between;
	}
	
	.cancel-btn, .confirm-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
	
	.cancel-btn {
		background: rgba(255, 255, 255, 0.1);
		color: rgba(255, 255, 255, 0.8);
	}
	
	.confirm-btn {
		background: linear-gradient(to right, #FF6A00, #FF4500);
		color: white;
	}
	
	/* 兼容iconfont的样式 */
	.iconfont {
		font-family: "iconfont" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.icon-user:before { content: "\e60a"; }
	.icon-phone:before { content: "\e618"; }
	.icon-weixin:before { content: "\e607"; }
	.icon-calendar:before { content: "\e627"; }
	.icon-password:before { content: "\e623"; }
	.icon-logout:before { content: "\e61d"; }
	.icon-right:before { content: "\e6a3"; }
</style>
